<template>
  <div>
    <p id="test1">{{ text1 }}</p>
    <p id="state">{{ stateTest }}</p>
    <p id="hasUser">{{ hasUser }}</p>
    <p id="count">{{ count + '' }}</p>
    <p id="get">{{ get + '' }}</p>
    <p id="post">{{ post + '' }}</p>
    <button id="add" @click="add">+</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { dispatch, getGetter, getState, commit } from '../store'

@Component({
  async asyncData({ store, locals: { test } }) {
    await Promise.all([
      dispatch(store, 'FETCH_USER', {
        test
      }),
      dispatch(store, 'API_POST', undefined),
      dispatch(store, 'API_GET', undefined)
    ])
  }
})
export default class Index extends Vue {
  text1 = 'home Page'

  get stateTest() {
    return getState(this.$store, 'user', 'test')
  }

  get count() {
    return getState(this.$store, 'count')
  }

  get get() {
    return getState(this.$store, 'api', 'get')
  }

  get post() {
    return getState(this.$store, 'api', 'post')
  }

  get hasUser() {
    return getGetter(this.$store, 'hasUser')
  }

  add() {
    commit(this.$store, 'ADD_NUMBER', 1)
  }
}
</script>
